<template>
  <div class="priceBox-right">
    <div class="rebate">
      <div class="scrollbar">
        <el-scrollbar height="100px" @end-reached="loadMore('bottom')">
          <div v-for="item in rebateList" :key="item.id" class="rebate-item">
            <div class="blue-dot"></div>
            <span class="text-blue">{{ formatTime(item.time) }}&nbsp;&nbsp;{{ item.type }}
              &nbsp;&nbsp;{{ formatAmount(item) }}</span>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'

import type { ScrollbarDirection } from 'element-plus'

// 格式化时间函数
const formatTime = (time: string): string => {
  // 简单处理，实际项目中可能需要更复杂的日期格式化
  return time;
};

// 格式化金额函数
const formatAmount = (item: { amount: number }): string => {
  return `¥${item.amount.toFixed(2)}`;
};

const rebateList = ref([
  { id: 1, time: '2025-09-15', type: '返利金额到期总额', amount: 1300.00 },
  { id: 2, time: '2025-10-15', type: '返利金额到期总额', amount: 1000.00 },
  { id: 3, time: '2025-11-15', type: '返利金额到期总额', amount: 1000.00 },
  { id: 4, time: '2025-12-15', type: '返利金额到期总额', amount: 1000.00 },
  { id: 5, time: '2026-01-15', type: '返利金额到期总额', amount: 1000.00 },
  { id: 6, time: '2026-02-15', type: '返利金额到期总额', amount: 1000.00 },
  { id: 7, time: '2026-03-15', type: '返利金额到期总额', amount: 1000.00 },
  { id: 8, time: '2026-04-15', type: '返利金额到期总额', amount: 1000.00 },
  { id: 9, time: '2026-05-15', type: '返利金额到期总额', amount: 1000.00 },
  { id: 10, time: '2026-06-15', type: '返利金额到期总额', amount: 1000.00 },

]);

const rebateList11 = ref([
  { id: 1, time: '2025-09-15', type: '返利金额到期总额', amount: 1300.00 },
  { id: 2, time: '2025-10-15', type: '返利金额到期总额', amount: 1000.00 },
  { id: 3, time: '2025-11-15', type: '返利金额到期总额', amount: 1000.00 },
  { id: 4, time: '2025-12-15', type: '返利金额到期总额', amount: 1000.00 },
]);
const loadMorenum = ref(1)
const loadMore = (direction: ScrollbarDirection) => {
  if (direction === 'bottom') {
    if (loadMorenum.value < 5) {
      rebateList.value = [...rebateList.value, ...rebateList11.value]
      loadMorenum.value++
       console.log('@end-reached到底了！！！！！')
    }else{
 console.log('@end-reached结束了')    }
  }
 
}


const rebatelistParm = reactive({
  pageA: 1,
  pageB: 1,
  size: 10,
  sort: 'desc',
  orderBy: 'id',
})

const getRebateList = (rebateType = 'A') => {
  loadMore('bottom');
  const { ...data } = rebateType == 'A'
    ? { ...rebatelistParm, pageB: undefined }
    : { ...rebatelistParm, pageA: undefined };
  console.log('请求参数:', data);
  rebateType === 'A' ? rebatelistParm.pageA++ : rebatelistParm.pageB++;
}


</script>

<style scoped>
.rebate {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  background-color: rgb(236, 245, 255);
  border-radius: 8px;
}

.rebate-item {
  height: auto;
  min-height: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blue-dot {
  width: 8px;
  height: 8px;
  background-color: #409eff;
  border-radius: 50%;
  flex-shrink: 0;
}

.text-blue {
  color: #606266;
  font-size: 13px;
}
</style>